<!DOCTYPE html>
<html>

<head lang="en">
    <title>首页</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/index.css" rel="stylesheet">
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/tichetCommon.js"></script>
    <script>
        $(function () {
            $.get(baseUrl + "/travelCommends/1", function (data) {
                $("#carouselExampleControls").renderValues(data, {
                    getHref: getHref
                });
                $(".carousel-item:first").addClass("active");
            });
            $.get(baseUrl + "/strategyComments", function (data) {
                $("#comments").renderValues(data, {
                    getHref: getHref
                });
            });

            //给搜索框绑定获取焦点焦点事件
            $("#searchBtn").focus(function () {
                $(".container").attr("style", "display:none");
            });
            //给搜索框绑定失去焦点事件
            $("#searchBtn").blur(function () {
                //$(this).val('');
                $(".container").attr("style", "display:inline-table");
            });
            //定义全局变量,用于接收搜索框的内容
            var search = '';
            //给搜索div绑定点击事件
            $("#searchBtn").click(function () {
                //获取搜索框的内容
                search = $(this).val();
            })

            $("#buttonSearch").click(function () {
                //调用点击事件
                $("#searchBtn").click();
                //console.log(search);
                if (search) {
                    //对获取的内容进行编码
                    var url = escape(search);
                    //跳转页面并将内容以get请求传参方式传输过去
                    window.location.href = "/searchPage.html?search=" + url;
                }
            });
            //获取日报
            $.get(baseUrl + "/dailyNews", {currentPage: 1}, function (data) {
                $("#smaller").renderValues(data, {
                    getHref: getHref
                })
            })

        })
    </script>

</head>
<!--<style>
    body{
        background: url('/upload/2.bmp') no-repeat;
        height:100%;
        width:100%;
        overflow: hidden;
        background-size:cover;
    }
</style>-->
<style>
    button {
        width: 135px;
        height: 100px;
        background: url("/upload/2.bmp") no-repeat;
        border-style: none;
    }

    body {
        background: url("/upload/2.bmp") no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>

<body>

<div class="body">
    <input type="checkbox" id="menu" style="text-align: left">
    <label for="menu" class="menu">
        <span><i class="fa fa-user fa-fw fa-2x"></i></span>
        <span><i class="fa fa-chevron-left fa-fw fa-2x" style="color: #3E3C3B"></i></span>
    </label>
    <!-- 侧边栏 -->
    <div class="nav">
        <iframe id="ipage" src="/mine/simpleProfiles.html" frameborder="0" width="90%"></iframe>
    </div>
    <!--搜索框-->
    <!--<div class="search-head">-->
    <div class="row nav-search" style="color: #eeeeee">
        <div class="col-1">
        </div>
        <div class="col-10">
            <div class="input-group-sm search">
                <input class="form-control" id="searchBtn" placeholder="搜索旅行攻略/旅游资讯" name="search">
            </div>
            <a href="#">
                <i class="fa fa-search" id="buttonSearch"
                   style="color:white;font-size:25px;position: absolute;top: 23%;left: 92%">
                </i>
            </a>
        </div>
        <div class="col-1">
            <!--<button class="btn" id="buttonSearch">搜索</button>-->
        </div>
    </div>
    <!-- </div>-->
    <div class="container">
        <h6 class="module-title">每周推荐</h6>
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <div id="travelsCommends">
                <div class="carousel-inner" render-loop="list">
                    <div class="carousel-item">
                        <a data-url="travelContent.html?id=" render-fun="getHref" render-key="list.travelId">
                            <img class="d-block w-100" render-src="list.coverUrl" width="100%" height="200px">
                            <span class="recommend" render-html="list.title">飞到羊城，只为一场最地道的早茶之旅</span></a>
                        <div class="recommend-author"><a href="#">
                            <img class="rounded-circle" style="width: 10%;" render-src="list.userHeadImgUrl">
                            <span render-html="list.userNickName">山猫大叔</span>
                        </a>在&nbsp;
                            <span render-html="regionName">广州</span>
                        </div>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only"></span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only"></span>
            </a>
        </div>
        <hr>

        <!--    <div class="row nav-box">
                <div class="col" style="background-color: #DFE823;" align="center">
                    <a href="strategyPage.html"><i class="fa fa-plane fa-fw"></i> 找攻略</a>
                </div>
                <div class="col" style="background-color: #7281D5;" align="center">
                    <a href="travelPage.html"><i class="fa fa-book fa-fw"></i> 看游记</a>
                </div>
            </div>
            <div class="row nav-box">
                <div class="col" style="background-color: #69ff1e;" align="center">
                    <a href="ticketIndex.html"><i class="fa fa-ticket fa-fw"></i> 门票</a>
                </div>
                <div class="col" style="background-color: #ff151c;" align="center">
                    <a href="companion.html"><i class="fa fa-venus-double fa-fw"></i> 结伴</a>
                </div>
            </div>
            <div class="row nav-box">
                <div class="col" style="background-color:#00bbd3;" align="center">
                    <a href="/mine/askAndAnswerCommunity.html"><i class="fa fa-question-circle fa-fw"></i> 骡骡问答</a>
                </div>
            </div>
    -->
        <div class="row nav-box">
            <div class="col" align="center">
                <button><a href="strategyPage.html"><i class="fa fa-plane fa-fw" style="color: #787a7d"></i> <span
                        style="color: #787a7d">找攻略</span></a></button>
            </div>
            <div class="col" align="center">
                <button><a href="travelPage.html"><i class="fa fa-book fa-fw" style="color: #787a7d"></i> <span
                        style="color: #787a7d">看游记</span></a></button>
            </div>
        </div>
        <div class="row nav-box">
            <div class="col" align="center">
                <button><a href="ticketIndex.html"><i class="fa fa-ticket fa-fw" style="color: #787a7d"></i> <span
                        style="color: #787a7d">门票</span></a></button>
            </div>
            <div class="col" align="center">
                <button><a href="companion.html"><i class="fa fa-venus-double fa-fw" style="color: #787a7d"></i> <span
                        style="color: #787a7d">结伴</span></a></button>
            </div>
        </div>
        <div class="row nav-box">
            <div class="col" align="center" style="background-color: #eeeeee">
                <a href="/mine/askAndAnswerCommunity.html"><i class="fa  fa-question-circle fa-fw"
                                                              style="color: #787a7d"></i> <span style="color: #787a7d">驴骡问答</span></a>
            </div>
        </div>

        <div class="row dynamic " id="comments">
            <div class="col-1" style="padding: 0px;">
                <img class="rounded" src="/img/topComment.png" style="width: 50px;">
            </div>
            <div class="col">
                <div class="Marquee" render-loop="list">
                    <div class="d-flex">
                        <a data-url="userProfiles.html?id=" render-fun="getHref" render-key="list.user.id">
                            <img class="rounded-circle dynamic-head"
                                 render-src="list.user.headImgUrl">
                        </a>
                        <a data-url="strategyComment.html?id=" render-fun="getHref" render-key="list.id"
                           class="dynamic-detail">
                            <span render-html="list.user.nickName">叩丁狼</span> 点评了攻略<p render-html="list.strategy.title">
                            广州攻略</p>
                        </a>
                    </div>
                    <!--<div class="d-flex">
                        <a href="userProfiles.html">
                            <img class="rounded-circle dynamic-head"
                                 src="/upload/23a45130-e59c-4844-bc52-67aed3d57fc1.jpeg">
                        </a>
                        <a href="strategyComment.html" class="dynamic-detail">
                            <span>喵喵</span> 点评了攻略<p>广州攻略</p>
                        </a>
                    </div>-->
                </div>
            </div>
        </div>
        <hr>
        <div class="col-12">
            <div id="he-plugin-standard" style="align-content: center"></div>
        </div>
    </div>
    <script>
        WIDGET = {
            CONFIG: {
                "layout": 1,
                "width": "300",
                "height": "150",
                "background": 1,
                "dataColor": "FFFFFF",
                "borderRadius": 5,
                "key": "c07939b14bba4954ae0e27732086332f"
            }
        }
    </script>
    <script src="https://widget.heweather.net/standard/static/js/he-standard-common.js?v=1.0"></script>
    <div class="container">
        <h6 class="module-title">骡窝日报 <a href="dailyNews.html" style="color: #787a7d">更多</a></h6>
        <hr>
        <div id="smaller">
            <div style="margin-bottom: 20px" render-loop="list">
                <a data-url="newsContent.html?id=" render-fun="getHref" render-key="list.id">
                    <div class="row news-detail">
                        <div class="col-5">
                            <img render-src="list.coverUrl">
                        </div>
                        <div class="col-7">
                            <h4 render-html="list.title">全球最性感的海滩！</h4>
                            <p render-html="list.subTitle" style="color: #c69500">男人女人都为之疯狂。 </p>
                        </div>
                    </div>
                    <hr>
                </a>
                <hr>
            </div>
        </div>
    </div>
</div>


<script>

    $(function () {
        showComments("Marquee");
        showComments("carousel-inner");
    })

    /*function showComments(){
     var Mar = document.getElementsByClassName("Marquee")[0];
     var child_div=Mar.getElementsByTagName("div");
     var picH = 50;//移动高度
     var scrollstep=3;//移动步幅,越大越快
     var scrolltime=20;//移动频度(毫秒)越大越慢
     var stoptime=3000;//间断时间(毫秒)
     var tmpH = 0;
     Mar.innerHTML += Mar.innerHTML;
     function start(){
     if(tmpH < picH){
     tmpH += scrollstep;
     if(tmpH > picH )tmpH = picH ;
     Mar.scrollTop = tmpH;
     setTimeout(start,scrolltime);
     }else{
     tmpH = 0;
     Mar.appendChild(child_div[0]);
     Mar.scrollTop = 0;
     setTimeout(start,stoptime);
     }
     }
     setTimeout(start,stoptime)
     }*/
</script>
</body>

</html>